<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js full-height">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>淘宝侧边栏demo</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="sidebarDemo2.css">
    <script src="components/modernizr/modernizr.js"></script>
</head>

<body>
    <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.
            </p>
    <![endif]-->
    <div id="sidebar">
        <div id="wrap">
            <div id="prof" class="item">
                <span>
                    <i class="glyphicon glyphicon-user"></i>
                </span>
                <div>
                    我
                </div>
            </div>
            <div id="asset" class="item">
                <span>
                    <i class="glyphicon glyphicon-usd"></i>
                </span>
                <div>
                    资产
                </div>
            </div>
            <div id="brand" class="item">
                <span>
                    <i class="glyphicon glyphicon-heart"></i>
                </span>
                <div>
                    品牌
                </div>
            </div>
            <div id="broadcast" class="item">
                <span>
                    <i class="glyphicon glyphicon-bell"></i>
                </span>
                <div>
                    直播
                </div>
            </div>
            <div id="foot" class="item">
                <span>
                    <i class="glyphicon glyphicon-eye-open"></i>
                </span>
                <div>
                    看过
                </div>
            </div>
            <div id="calendar" class="item">
                <span>
                    <i class="glyphicon glyphicon-time"></i>
                </span>
                <div>
                    日历
                </div>
            </div>
        </div>
        <div id="closeBar">
            <div>
                <i class="glyphicon glyphicon-remove"></i>
            </div>
        </div>
    </div>
    <div id="prof-content" class="nav-content">
        <div class="nav-con-close">
            <i class="glyphicon glyphicon-chevron-left"></i>
        </div>
        <div>
            我
        </div>
    </div>
    <div id="asset-content" class="nav-content">
        <div class="nav-con-close">
            <i class="glyphicon glyphicon-chevron-left"></i>
        </div>
        <div>
            资产
        </div>
    </div>
    <div id="brand-content" class="nav-content">
        <div class="nav-con-close">
            <i class="glyphicon glyphicon-chevron-left"></i>
        </div>
        <div>
            品牌
        </div>
    </div>
    <div id="broadcast-content" class="nav-content">
        <div class="nav-con-close">
            <i class="glyphicon glyphicon-chevron-left"></i>
        </div>
        <div>
            品牌
        </div>
    </div>
    <div id="foot-content" class="nav-content">
        <div class="nav-con-close">
            <i class="glyphicon glyphicon-chevron-left"></i>
        </div>
        <div>
            看过
        </div>
    </div>
    <div id="calendar-content" class="nav-content">
        <div class="nav-con-close">
            <i class="glyphicon glyphicon-chevron-left"></i>
        </div>
        <div>
            日历
        </div>
    </div>
    <div id="content">
    </div>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
    /*jshint expr: true */
    /*jslint evil: true */  
    window.jQuery || document.write('<script src="components/jquery/dist/jquery.min.js"><\/script>');
    </script>
    <script src="sidebarDemo2.js"></script>
</body>

</html>
